<template>
  <div>
    <button id="button" class="ready" onclick="clickButton();">
      <div class="message submitMessage">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12.2">
          <polyline stroke="currentColor" points="2,7.1 6.5,11.1 11,7.1 "></polyline>
          <line stroke="currentColor" x1="6.5" y1="1.2" x2="6.5" y2="10.3"></line>
        </svg> <span class="button-text"><span class="char0" style="--d:0ms; --dr:240ms;">S</span><span class="char1" style="--d:30ms; --dr:210ms;">e</span><span class="char2" style="--d:60ms; --dr:180ms;">n</span><span class="char3" style="--d:90ms; --dr:150ms;">d</span><span class="char4" style="--d:120ms; --dr:120ms;">i</span><span class="char5" style="--d:150ms; --dr:90ms;"> </span><span class="char6" style="--d:180ms; --dr:60ms;">n</span><span class="char7" style="--d:210ms; --dr:30ms;">g</span><span class="char8" style="--d:240ms; --dr:0ms;">!</span></span>
      </div>
      <div class="message loadingMessage">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 17">
          <circle class="loadingCircle" cx="2.2" cy="10" r="1.6"></circle>
          <circle class="loadingCircle" cx="9.5" cy="10" r="1.6"></circle>
          <circle class="loadingCircle" cx="16.8" cy="10" r="1.6"></circle>
        </svg>
      </div>
      <div class="message successMessage">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 11">
          <polyline stroke="currentColor" points="1.4,5.8 5.1,9.5 11.6,2.1 "></polyline>
        </svg>
        <span class="button-text"><span class="char0" style="--d:0ms; --dr:180ms;">S</span><span class="char1" style="--d:30ms; --dr:150ms;">u</span>
            <span class="char2" style="--d:60ms; --dr:120ms;">c</span>
            <span class="char3" style="--d:90ms; --dr:90ms;">c</span>
            <span class="char4" style="--d:120ms; --dr:60ms;">e</span>
            <span class="char5" style="--d:150ms; --dr:30ms;">s</span>
            <span class="char6" style="--d:180ms; --dr:0ms;">s</span>
        </span>
      </div>
    </button>
    <canvas id="canvas" width="1470" height="775"></canvas>
  </div>
</template>

<script>
export default {
  name: "Success",
  methods:{
  },
  //这样就可以控制我们导入的js或者css的范围
  created() {
    import('@/assets/js/success');
    import('@/assets/css/success.css')
  },
  mounted() {
    setTimeout(()=>{
      clickButton();
    },0)
  },
  beforeRouteLeave(){
    setTimeout(()=>{
      clickButton();
    },0)
  }
}
</script>

<style scoped>

</style>